<template>
<div class="main">
  <!-- 头部导航栏 -->
  <head-component :title="type=='1'?'贷款中心':(type=='2'?'信用卡':(type=='3'?'黑户专享':'空卡代还'))" />
<!--  内容-->
  <div class="con">
    <!--banner-->
    <van-swipe :autoplay="3500" class="banner">
      <van-swipe-item @click="location.href = item.b_link" v-for="(item,i) in bannerImg" :key="i"><img :src="item.b_img" alt=""></van-swipe-item>
    </van-swipe>
    <div class="list"  v-for="(item,i) in list" :key="i" @click="toPage(item.p_id, item.p_name)">
      <div class="list1">
        <p class="top f20 col_ff" v-if="item.p_tui == 1">推荐</p>
        <div class="img_box">
          <img :src="item.p_img" alt="">
        </div>
        <p class="f24 col_33 oneline p_name">{{item.p_name}}</p>
        <div class="tit2 f22 col_99 oneline totop">{{item.p_title}}</div>
        <div class="price f24 totop">返佣{{item.p_award}}</div>
      </div>
      <div class="time f22 col_ff totop oneline">{{item.p_des}}</div>
    </div>
    <!-- 如果内容列表为空 -->
    <div class="null_list" v-if="list == ''">
      <img class="null_img" src="@/common/icon/nothing.png" alt="">
      <div class="null_title">暂无数据</div>
    </div>
  </div>
</div>
</template>

<script>
import headComponent from '@/components/layout/head'
export default {
    name: "daikuan.vue",
    components: {
      headComponent,
    },
  data() {
    return {
      // rightIcon: require("@/common/icon/add.png"),
      list:[],
      type:1,
      userStatus:0,
      m_rz:0,
      bannerImg: []
    }
  },
  created(){
    var $this = this;
    $this.m_rz = localStorage.getItem('isRenzheng');
    $this.type = $this.$route.query.type;
    $this.getList($this.type);
    //  个人信息
    var data2 = {u_id: localStorage.getItem('uid'),token:localStorage.getItem('token')};
    $this.$axios.post('index.php?m=user&c=index',data2)
      .then((res) => {
        if(res.data.code == 1){
          this.userStatus = res.data.user.m_level;

        }else{
          this.$router.push('/login');
        }
      });
  },
  methods: {
    getList(type){
      var $this = this;
      var t = this.$toast.loading({message:'正在加载数据',mask:true, duration:9999})
      var data = {u_id: localStorage.getItem('uid'),token:localStorage.getItem('token'),type:type};
      $this.$axios.post('index.php?m=index&c=product',data)
        .then((res) => {
          t.clear();
          if(res.data.code == 1){
            $this.list = res.data.goods;
            this.bannerImg = res.data.banner
          }else{
            $this.$toast({
              message: '请先登录',
              duration: 800,
              onClose: ()=> {
                $this.$router.push('/login');
              }
            })

          }
        })
    },
    toPage(id, name){
      var $this = this;
      if($this.userStatus != 0){
        // location.href = path;
        $this.$router.push(`/daikuanDetails?id=${id}&&name=${name}&&type=${$this.type}`)
      }else{
        $this.$toast({
          message: '请先开通VIP',
          duration: 800,
          onClose: ()=> {
            $this.$router.push('/vip');
          }
        })
      }
    }
  },
}
</script>

<style scoped lang="less">
  .main{width: 100%;height: 100%;background: #fff;}
  .layout-head{border-bottom: 0.02rem solid #f5f5f5;}
  .oneline{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.con{
  margin: 1.2rem auto 0.9rem;
  overflow: hidden;
  display: flex;
  display: -webkit-flex;
  padding: 0rem 0.4rem;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  .banner{
    width: 100%;
    margin: 0 auto 0.2rem;
    height: 4rem;
    div{
      width: 100%;height: 100%;}
    img{
      width:100%;
      height: 100%;
      border-radius: 0.16rem;
    }
    .mint-swipe-indicators{background: rgba(255,255,255,0.5)!important;width: 0.3rem!important;height: 0.3rem!important;}
    .is-active{background: rgba(255,255,255,1)!important;}
  }
  .list:nth-child(2n+2){margin-right: 0;}
  .list{
    width: 33.3333%;
    padding: 0.2rem;

    .list1{
      border: 0.02rem solid #f5f5f5;
      position: relative;
      text-align: center;
      overflow:hidden;
      padding: 0.2rem;
      width: 100%;
      height: 0;
      padding-bottom: 90%;
      // border-top-radius: 0.15rem;
      border-top-left-radius: 0.15rem;
      border-top-right-radius: 0.15rem;
      .top{width: 100%;height: 0.37rem;line-height: 0.4rem;text-align: center;transform: rotate(-45deg);
        position: absolute;background: #ff6840;top: 0.15rem;left: -1rem; z-index: 2;
      }
      .img_box{
        width:45%;height:0;position: relative;padding-bottom: 45%;
        img{
          width:100%;height:100%;position: absolute; top: 0; left: 57.5%;
          border-radius: 0.2rem;
          // border: 1Px solid #f5f5f5
        }
      }
      .p_name{ margin-top: 0.05rem; }
      .totop{ margin-top: -0.18rem; }

      .tit2{line-height: 0.76rem;}
      .price{color: #fd5f5f;font-weight: 600;}
    }

    .time{text-align: center; margin-top: 0.02rem; width: 100%;height: 0.5rem;line-height: 0.5rem;background: #99c6f9;
      border-bottom-left-radius: 0.15rem;
      border-bottom-right-radius: 0.15rem;
    }
  }
}
</style>
